<template>
  <el-row :gutter="20" class="clear-data">
    <el-col :span="8" class="clear-box">
      <div class="menu-wrap">
        <div class="menu-title">
          <span class="menu-title-text">已选目标模型</span>
          <div>
            <el-button size="small" type="primary" @click="selectAll">全选模型</el-button>
          </div>
        </div>
        <div class="menu-search">
          <el-input
            v-model="filterText"
            clearable
            size="small"
            placeholder="请输入过滤关键词"
            @input="filterMenu"
          ></el-input>
        </div>
        <div class="menu-container">
          <template v-for="(val, k) in clearInfoMap">
            <div
              v-show="!val.hide"
              class="menu-item"
              :class="{
                active: val.label === curSelect.label,
                'checked-all': isSelectAll,
              }"
              :key="k"
              :title="val.label"
              @click="changeMenu(val)"
            >
              {{ val.label }}
            </div>
          </template>
        </div>
      </div>
    </el-col>
    <el-col :span="16" class="clear-box">
      <div class="rule-config">
        <h3 style="margin-bottom: 10px">
          【{{ isSelectAll ? "所有目标模型表" : curSelect.label }}】清理条件
        </h3>
        <el-form label-width="90px" :model="curSelect">
          <el-form-item label="清理规则">
            <el-select
              v-model="curSelect.cleanStrategy"
              placeholder="请选择"
              clearable
              :disabled="!curSelect.label"
              @change="changeSelect"
            >
              <el-option
                v-for="item in strategy"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item v-if="curSelect.cleanStrategy == '2'" label="自定义sql">
            <el-input
              v-model="curSelect.sql"
              :rows="5"
              type="textarea"
              @input="changeInput"
            />
          </el-form-item>
        </el-form>
      </div>
    </el-col>
  </el-row>
</template>
<script>
export default {
  name: "ClearData",
  props: {
    configInfo: {
      type: Object,
      default: () => {},
    },
    targetModel: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    changData() {
      return {
        cleanDataMap: this.configInfo,
        targetModelNames: this.targetModel,
      };
    },
  },
  watch: {
    // 处理传入的规则信息
    changData: {
      handler(val, oldVal) {
        this.$forceUpdate();
        if (Array.isArray(val?.targetModelNames) && val?.targetModelNames.length) {
          console.log(
            "%c [ val.targetModelNames ]-106",
            "font-size:13px; background:pink; color:#bf2c9f;",
            val.targetModelNames
          );
          this.clearInfoMap = {}
          for (let item of val.targetModelNames) {
            if (!(item.tableName in this.clearInfoMap)) {
              if (
                val.cleanDataMap &&
                typeof val.cleanDataMap === "object" &&
                JSON.stringify(val.cleanDataMap) !== "{}"
              ) {
                let flag = false
                for (let k in val.cleanDataMap) {
                  let table = k.split("^");
                  if (table[1] == item.id) {
                    this.clearInfoMap[table[0]] = {
                      id: item.id,
                      label: item.tableName,
                      cleanStrategy: val?.cleanDataMap[k]?.cleanStrategy || "",
                      sql: val?.cleanDataMap[k]?.sql || "",
                    };
                    flag = true
                    break
                  }
                }
                if (flag)
                  continue
              }
              // else {
              this.clearInfoMap[item.tableName] = {
                id: item.id,
                label: item.tableName,
                cleanStrategy: "",
                sql: "",
              };
              // }
            }
          }
          console.log(
            "%c [ this.clearInfoMap ]-135",
            "font-size:13px; background:pink; color:#bf2c9f;",
            this.clearInfoMap
          );
        }
      },
      immediate: true,
      deep: true,
    },
    // 处理模型信息
    // targetModel: {
    //   handler(val, oldVal) {
    //     // this.clearInfoMap = {}; // 清空已选目标模型
    //     if (Array.isArray(val) && val.length) {
    //       for (let item of val) {
    //         if (!(item.tableName in this.clearInfoMap)) {
    //           this.clearInfoMap[item.tableName] = {
    //             id: item.id,
    //             label: item.tableName,
    //             cleanStrategy: "",
    //             sql: "",
    //           };
    //         }
    //       }
    //     }

    //     console.log(
    //       "%c [  ]-131",
    //       "font-size:13px; background:pink; color:#bf2c9f;",
    //       this.clearInfoMap
    //     );
    //   },
    //   immediate: true,
    //   deep: true,
    // },
  },
  data() {
    return {
      filterText: null,
      clearInfoMap: {},
      curSelect: {},
      isSelectAll: false,
      // 清理规则options
      strategy: [
        {
          value: "0",
          label: "写入前清除全部已有数据",
        },
        {
          value: "1",
          label: "不做清理，保留历史数据",
        },
        {
          value: "2",
          label: "自定义清理规则",
        },
      ],
    };
  },
  methods: {
    selectAll() {
      if (this.isSelectAll) {
        this.curSelect = {};
      }
      this.isSelectAll = !this.isSelectAll;
    },
    filterMenu(val) {
      for (let k in this.clearInfoMap) {
        if (this.clearInfoMap[k].label.toUpperCase().includes(val.toUpperCase())) {
          this.clearInfoMap[k].hide = false;
        } else {
          this.clearInfoMap[k].hide = true;
        }
      }
    },
    changeMenu(menu) {
      if (this.curSelect.label === menu.label) {
        this.curSelect = {};
      } else {
        this.curSelect = menu;
      }
    },
    // 全选时 更新其他的规则
    changeSelect(val) {
      if (this.isSelectAll) {
        for (let k in this.clearInfoMap) {
          this.clearInfoMap[k].cleanStrategy = val;
        }
      }
    },
    // 全选时 更新其他的sql
    changeInput(val) {
      if (this.isSelectAll) {
        for (let k in this.clearInfoMap) {
          this.clearInfoMap[k].sql = val;
        }
      }
    },
    // 用于父组件收集数据
    getData() {
      return new Promise((resolve, reject) => {
        const res = {};
        for (let k in this.clearInfoMap) {
          let item = this.clearInfoMap[k];
          let key = `${k}^${item.id}`;
          if (item.cleanStrategy) {
            res[key] = {
              cleanStrategy: item.cleanStrategy,
              sql: item.sql,
            };
          }
        }
        resolve({ cleanDataMap: res });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.clear-data {
  height: 100%;
  box-sizing: border-box;
}
.clear-box {
  height: 100%;
}

.menu-wrap {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  height: 100%;
}
.menu-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  .menu-title-text {
    border-left: 3px solid $--color-primary;
    padding-left: 5px;
    margin: 8px 0;
  }
}

.menu-container {
  flex: 1;
  padding: 10px 0;
  overflow-y: auto;
}

.menu-item {
  padding: 5px 10px;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  &.active,
  &.checked-all {
    background-color: #f1f4fd;
    color: $--color-primary;
  }
}
</style>
